<template>
  <div>
    <el-dialog ref="dialog" :title="$root.lang.control.app.bind.title" :visible.sync="showDialog" width="50%" @close="closeDialog"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" size="small" label-position="right" label-width="110px" v-loading="init">
        <el-form-item :label="$root.lang.control.app.bind.webId" prop="webId">
          <el-select v-model="form.webId" :placeholder="$root.lang.control.device.create.select">
            <el-option :label="item.webName" :value="item.id" :key="item.id" v-for="item in pageList"></el-option>          
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" :loading="loading" type="primary" @click="onSubmit('form')">{{ $root.lang.control.app.create.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      init: false,
      loading: false,
      showDialog: this.show,
      form: {
        appId: null,
        webId: null,
      },
      rules: {
        webId: [{ required: true, message: this.$root.lang.control.app.bind.rule.webId, trigger: 'blur' }],
      },
      pageList: []
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    appId: {
      type: String,
      default: null
    },
    webId: {
      type: String,
      default: null
    },
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
      this.form.appId = this.appId
      if(value) {
        this.getPageList()
      }
    },
  },
  methods: {
    closeDialog() {
      this.$emit('editReceive',{
        key: 'showBind',
        value: this.showDialog
      })
    },
    onSubmit(formName) {
      let base = this
      var flag = true

      base.$refs[formName].validate((valid) => {
        if (!valid) {
          flag = false
          return false
        }
      })
      if(flag) {
        console.log(base.form)
        base.doCreate()
      }
    },
    doCreate() {
      let base = this
      base.loading = true
      let url = '/web/app-bid'
      if(this.webId != 'null') {
        url = '/web/app-bid/update'
      }
      base.request({
        url: url,
        method: 'get',
        params: base.form
      }).then(response => {
        base.loading = false
        base.showDialog = false
        base.$emit('reload')
        base.$message({
          message: this.$root.lang.confirm.bindSuccess,
          type: 'success',
          duration: 3 * 1000,
        })
      }).catch(error => {
        base.loading = false
        base.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    getPageList() {
      this.request({
        url: '/web/page',
        method: 'post',
        data: {}
      }).then(response => {
        this.pageList = response.rows
        this.tableTotal = response.total
      }).catch(error => {
        this.pageList = []
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      var button = document.querySelector('.dialog-btn')
      if(!button) return
      if (key == 13) {
        lett.onSubmit('form')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>